<template>
	<view>
		<view class="body">
			<view class="logo">
				<image src="../../static/logo.png" style="width: 200rpx;height: 200rpx;"></image>
			</view>
			<InputForm :type="retrieve" ref='myComponent'></InputForm>
			<!-- <view class="card">
				<input type="text" v-model="nickName" placeholder="请输入昵称..." placeholder-class="text" />
			</view>
			<view class="card">
				<input type="password" v-model="password" placeholder="请输入密码..." placeholder-class="text" />
			</view>
			<view class="card">
				<input type="password" v-model="comfirmPassword" placeholder="请再次输入密码..." placeholder-class="text" />
			</view>
			
			<view class="card1">
				<input type="text" v-model="phone" placeholder="请输入手机号或邮箱..." placeholder-class="text" />
				<view class="get-code" :style="{'color':getCodeBtnColor}" @click.stop="getCode()">{{getCodeText}}</view>
			</view>
			<view class="card">
				<input type="password" v-model="comfirmPassword" placeholder="请输入验证码..." placeholder-class="text" />
			</view> -->
			<view class="btn" @tap="reset">重置密码</view>
			

		</view>
		<view class="footer">
			<text class="">
			</text><text class="text" @click="login">登录账号</text>
			</text>
		</view>
	</view>
</template>

<script>
	import InputForm from "../../components/InputForm/InputForm.vue"
	import Valid from "../../config/valid.js"
	export default {
		components:{InputForm},
		data() {
			return {
				id: "",
				password: "",
				comfirmPassword: "",
				phone:"",
				code:"",
				getCodeText:"获取验证码",
				getCodeBtnColor:"rgb(174 174 174)",
				getCodeWaiting:false,
				retrieve:"retrieve"
			}
		},
		created() {
			uni.setStorage({
				key:'cur_page',
				data:'retrieve'
			})
		},
		methods: {
			reset(){
				let lst=this.$refs.myComponent.getlst()
				console.log(lst)
				this.id=lst[0]
				this.phone=lst[1]
				this.code=lst[2]
				this.password=lst[3]
				this.comfirmPassword=lst[4]
				
				var rules=[]
				//校验昵称
					var check=Valid.check(rules)
					check.add(this.id,[{strategy:'isNotEmpty',errorMsg:'账号不能为空'}])//用户名是否存在提交之后统一判断
					var error=check.start()
					if(error!==undefined){
						console.log(error)
						uni.showToast({
							icon:'none',
							title:error
						})
						return
					}
					// check.start()
					
					
					//校验联系方式
					rules=[]
					check=Valid.check(rules)
					check.add(this.phone,[{strategy:'isNotEmpty',errorMsg:'手机号不能为空'},{strategy:'NumberFormat',errorMsg:'手机号或邮箱不正确'}])
					error=check.start()
					console.log(error)
					if(error!==undefined){
						console.log(error)
						uni.showToast({
							icon:'none',
							title:error
						})
						return
					}
					console.log(uni.getStorageSync('already_reg'))
					if(uni.getStorageSync('already_reg')==='2'){
						uni.showToast({
							icon:'none',
							title:"联系方式未注册"
						})
						return
					}
					console.log(uni.getStorageSync('id'))
					console.log(this.id)
					if(uni.getStorageSync('id').toString()!==this.id){
						uni.showToast({
							icon:'none',
							title:"联系方式与账号不符"
						})
						return
					}
					//校验验证码
					rules=[]
					check=Valid.check(rules)
					check.add(this.code,[{strategy:'isNotEmpty',errorMsg:'验证码不能为空'},{strategy:'CheckCode',errorMsg:'验证码无效'}])
					error=check.start()
					console.log(error)
					if(error!==undefined){
						console.log(error)
						uni.showToast({
							icon:'none',
							title:error
						})
						return
					}
					
					//校验密码
					rules=[]
					check=Valid.check(rules)
					var str='checkPwd:'+this.comfirmPassword
					// check.add(this.password,[{strategy:'isNotEmpty',errorMsg:'密码不能为空'}])
					check.add(this.password,[{strategy:'isNotEmpty',errorMsg:'密码不能为空'},{strategy:'checkPwdFormat',errorMsg:'密码须由八个以上字符组成，至少包括一个字母和一个数字'},{strategy:str,errorMsg:'两次密码输入不一致'}])
					error=check.start()
					console.log(error)
					if(error!==undefined){
						console.log(error)
						uni.showToast({
							icon:'none',
							title:error
						})
						return
					}
					this.format=uni.getStorageSync('format')
					if(this.format===""){
						uni.showToast({
							title:'手机号或邮箱填写有误',
							icon:"none"
						});
						return false;
					}
					// if (this.password !== this.comfirmPassword) {
					// 	uni.showToast({
					// 		icon: "none",
					// 		title: "两次密码不相同"
					// 	})
					// 	return
					// }
					this.$request.TokenRequest({
						url: '/user/findUserPassword'
					}, {
						id: this.id,
						newPassword: this.password,
						// [this.format]:this.phone
					}).then(res => {
						console.log(res)
						if (res.state === 200) {
							uni.showToast({
								icon:"success",
								title:"重置密码成功"
							})
							uni.redirectTo({
										url: '../login/login'
									})
							// uni.showModal({
							// 	title: "提示",
							// 	content: "您的ID号为:" + res.data.id,
							// 	showCancel: false,
							// 	confirmText: "复制到粘贴板",
							// 	success() {
							// 		uni.setClipboardData({
							// 			data: res.data.id+'',
							// 			success() {
							// 				uni.showToast({
							// 					icon: 'none',
							// 					title: "已复制到粘贴板"
							// 				})
							// 			},
							// 			fail(err) {
							// 				console.log("err:"+err)
							// 			}
							// 		})
							// 		uni.redirectTo({
							// 			url: '../login/login'
							// 		})
							// 	}
							// })
						}
					})
				
			},
			Timer(){},
			getCode(){
				uni.hideKeyboard()
				if(this.getCodeWaiting){
					return;
				}
				if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phone))){
					uni.showToast({
						title:'手机号填写有误',
						icon:"none"
					});
					return false;
				}
				this.getCodeText="发送中"
				this.getCodeWaiting=true;
				this.getCodeBtnColor="rgb(174 174 174)"
				
				setTimeout(()=>{
					uni.showToast({
						title:"已发送验证码",
						icon:"success"
					});
					this.code='1234';//默认1234
					this.setTimer();
				},1000)
			},
			setTimer(){
				let holdTime=60;
				this.getCodeText="重新获取（60）"
				this.Timer=setInterval(()=>{
					if(holdTime<=0){
						this.getCodeWaiting=false;
						this.getCodeBtnColor="rgb(174 174 174)"
						this.getCodeText="获取验证码"
						clearInterval(this.Timer);
						return;
					}
					this.getCodeText="重新获取("+holdTime+")"
					holdTime--;
				},1000)
			},
			login() {
				uni.redirectTo({
					url: "../login/login"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.body {
		margin: 0 auto;
		padding-top: 200rpx;
		width: 85%;

		.logo {
			text-align: center;
			width: 100%;
			padding-bottom: 50rpx;
		}
		.btn {
			color: #FFFFFF;
			background-color: #6869a8;
			margin: 50rpx auto;
			padding: 35rpx 55rpx;
			border-radius: 200rpx;
			text-align: center;
			
			// width: 70%;
			
		}
		.card {
			background-color: #F5F5F5;
			margin: 50rpx auto;
			padding: 35rpx 55rpx;
			border-radius: 200rpx;

			// width: 70%;
			.text {
				font-size: 35rpx;
			}
		}
		.card1 {
			display: flex;
			background-color: #F5F5F5;
			// margin: 35rpx auto;
			padding: 35rpx 55rpx;
			border-radius: 200rpx;
			
			// .text {
			// 	font-size: 35rpx;
			// }
			.get-code {
					position: absolute;
					height: 24rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					right: 0;
					padding: 12rpx 90rpx 15rpx 15rpx;
					z-index: 3;
					font-size: 25rpx;
					
					&:after { //点击以后，左边出现白色的线
						content: " ";
						width: 1upx; //宽度为1upx
						height: 50upx; //高度为50upx
						background-color: #A5A5A5;  //背景颜色为白色
						position: absolute;
						z-index: 3;
						margin-right: 100%;
						left: 0;
						top: 0;
					}
				}
		}
		.check{
			font-size:13px;
		}

		.login {
			background-color: #007AFF;
			width: 120rpx;
			height: 120rpx;
			line-height: 120rpx;
			text-align: center;
			padding: 15rpx;
			border-radius: 120rpx;
			margin: 40rpx auto;
		}
	}

	.footer {
		width: 100%;
		position: absolute;
		bottom: 60rpx;
		text-align: center;

		.text {
			// font-weight: 600;
			font-size: 25rpx;
			margin: 0 15rpx;
		}
	}
</style>
